@import '../../../styles/breakpoints';
$min-width-cards-div: 910px;

.groups-overview {
  padding-top: 3rem;
  background-color: #f2f2f2;
  #groups-tab {
    display: flex;
    justify-content: space-around;
    .buttons-div {
      display: flex;
      .filter-div {
        button {
          margin-left: 1rem !important;
        }
      }
      .new-group {
        a {
          width: max-content !important;
        }
      }
    }

    .cards-and-sort-section {
      display: flex;
      .cards {
        display: flex;
        flex-wrap: wrap;
        margin-left: 1rem !important;
        min-width: $min-width-cards-div;
        margin-top: 1rem;
        .card-container {
          cursor: pointer;
        }

        .group-card {
          width: 280px;
          margin: 1rem 1rem 0 0;
        }
      }
      .sort {

        margin-top: 2rem;
        #input-div {
          border-bottom: 1px solid var(--secondary);
          display: flex;
          button {
            background-color: transparent;
            color: var(--info);
            border: none;
            padding: 0px;
            margin: 0 0 1rem 0;
            cursor: pointer;
          }
          p {
            margin: 0 7rem 1rem 0;
            color: var(--secondary);
          }
        }

        .name-filter-section{
          display: flex;
          justify-content: space-between;
        }
      }
    }
  }
}

@media (max-width: $bp-md) {
  .groups-overview {
    #groups-tab {
      .cards-and-sort-section {
        .cards {
          min-width: unset;
        }
      }
    }
  }
}